<template>
    <a-button @click="addSub">添加</a-button>
    <!-- <BasicFormSub @register="registerForm" v-for="item, index in data.Num" :key="item.id">
        <template #del>
            <button @click="delSub(index)">删除{{ item.id }}</button>
        </template>
    </BasicFormSub> -->
    <!-- <BasicFormSub v-for="item, index in data.Num" :key="index"> -->

    <a-form ref="form">
        <a-row v-for="item, index in data.Num" :key="index">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
                <a-input :value="item.name" @input="event => item.name = event.target.value" placeholder="请输入名称" />
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="类型">
                <a-input :value="item.type" @input="event => item.type = event.target.value" placeholder="请输入类型" />
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="值">
                <a-input :value="item.bimValue" @input="event => item.bimValue = event.target.value"
                    placeholder="请输入值" />
            </a-form-item>
            <a-button @click="delSub(index)" >删除</a-button>
        </a-row>
    </a-form>
    <!-- </BasicFormSub> -->
</template>

<script lang="ts" setup>
import { ref, reactive, computed, unref, toRaw, nextTick } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from '../BimStructureInfoSub.data';
import { saveOrUpdate } from '../BimStructureInfoSub.api';
// Emits声明
const emit = defineEmits(['register', 'success']);
const isUpdate = ref(true);
const data = reactive<any | null>({
    Num: [],
    current: 0,
});
const labelCol = {
    xs: { span: 24 },
    sm: { span: 6 },
}
const wrapperCol = {
    xs: { span: 24 },
    sm: { span: 16 },
}
//表单配置
const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({
    //labelWidth: 150,
    schemas: formSchema,
    showActionButtonGroup: false,
    baseColProps: { span: 7 },
});
//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    await resetFields();
    setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
    isUpdate.value = !!data?.isUpdate;
    if (unref(isUpdate)) {
        //表单赋值
        await setFieldsValue({
            ...data.record,
        });
    }
    // 隐藏底部时禁用整个表单
    setProps({ disabled: !data?.showFooter })
});

function setNum(value) {
    if (value) {
        data.Num = value
    }
}
function getNum() {
    return data.Num
}
defineExpose({ setNum, getNum });
function addSub() {
    let params = {
        name: "",
        type: "",
        bimValue: ""
    }
    console.log("params", params)
    data.Num.push(params)
    console.log("/*/*/*/*/", data.Num)
}
function delSub(index) {
    console.log(index)
    data.Num.splice(index, 1)

}
//设置标题
const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
//表单提交事件
async function handleSubmit(v) {
    try {
        let values = await validate();
        setModalProps({ confirmLoading: true });
        //提交表单
        await saveOrUpdate(values, isUpdate.value);
        //关闭弹窗
        closeModal();
        //刷新列表
        emit('success');
    } finally {
        setModalProps({ confirmLoading: false });
    }
}

</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
    width: 100%
}

:deep(.ant-calendar-picker) {
    width: 100%
}
</style>